<a style="display: none" id="lnk3" href="#sign-up-3-form" class="modal-opener">here</a>

<form method="post" id="sign-up-3-form" class="sky-form sky-form-modal"
      action="<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=register/step3"
      style="width: 600px">
    <header>Private Data</header>

    <fieldset>
        <div class="row">
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-user"></i>
                    <input type="email" name="email" id="pEmail" placeholder="Email">
                </label>
            </section>
            <section class="col col-6">
                <label class="input">
                    <i class="icon-append icon-phone"></i>
                    <input type="text" name="phone" placeholder="Phone number">
                </label>
            </section>
        </div>

        <section>
            <label class="input">
                <i class="icon-append icon-link"></i>
                <input type="text" name="video" placeholder="Video link">
            </label>
        </section>
    </fieldset>

    <footer>
        <button type="submit" class="button">Finish</button>
        <div class="progress"></div>
    </footer>

    <div class="message">
        <i class="icon-ok"></i>

        <p>Thanks for your registration!<br>One registration email is sent to your mailbox</p>
    </div>
</form>

<script type="text/javascript">
    $(function () {
        // Validation
        $("#sign-up-3-form").validate(
                {
                    // Rules for form validation
                    rules:{
                        email:{
                            required:true,
                            remote: {
                                url: "<?php echo Yii::app()->request->baseUrl; ?>/index.php?r=register/checkEmail",
                                type: "get",
                                data: {
                                    val: function() {
                                        return $( "#pEmail" ).val();
                                    }
                                }
                            }
                        },
                        phone:{
                            required:true,
                            number:true
                        }
                    },

                    // Messages for form validation
                    messages:{
                        email:{
                            required:'Please enter your email',
                            minlength: jQuery.format("Enter at least {0} characters"),
                            remote: jQuery.format("{0} is already in use")
                        },
                        phone:{
                            required:'Please enter your phone'
                        }
                    },

                    // Ajax form submit
                    submitHandler:function (form) {
                        $(form).ajaxSubmit(
                                {
                                    beforeSend:function () {
                                        $('#sign-up-3-form button[type="submit"]').addClass('button-processing').attr('disabled', true);
                                    },
                                    success:function () {
                                        $("#sign-up-3-form").addClass('submited');
                                        $('#sign-up-3-form button[type="submit"]').removeClass('button-processing').removeAttr('disabled');
                                    }
                                });
                    },

                    // Do not change code below
                    errorPlacement:function (error, element) {
                        error.insertAfter(element.parent());
                    }
                });
    });
</script>